<%@include file="/WEB-INF/templates/configuration.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<style>

</style>

<h2>Chapters</h2>
<c:choose>
    <c:when test="${amountassignments != 0}">
        <!-- Wanneer er gebruikers opgeslagen zijn, worden ze hier getoond -->
        <table class="zebra">
            <tr>
                <td style="width:100px"> 
                    <strong>Assignment Name</strong>
                </td>
                <td style="width:300px">
                    <strong>Assignment Question</strong>
                </td>
                <td></td>
            </tr>
            <c:forEach var="tempAssignment" items="${assignments}">
                <!-- Per gebruiker wordt nu een rij aangemaakt met daarin zijn gegevens -->
                <tr>
                    <td>
                        ${tempAssignment.assignmentname}
                    </td>
                    <td style="width:300px">
                        <div class="description">${tempAssignment.assignmentquestion}</div>
                    </td>
                    <td style="width:100px">
                        <a class="icon edit" href="${url}assignment/edit?chapterid=${chapter.chapterid}">edit</a> 
                        <a class="icon delete" href="javascript:if(confirm('Weet u zeker dat u deze Chapter wil verwijderen?'))
                           window.location='${url}assignment/delete?assignment=${chapter.chapterid}';">delete</a>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </c:when>
    <c:otherwise>
        <!-- Als er geen cursussen zijn, wordt deze melding getoond -->
        There are no chapters found.
    </c:otherwise>
</c:choose>
<p>
<form id="nieuweCursus" action="new" method="post">
    <input type="hidden" name="chapterid" id="chapterid" value="${chapter.chapterid}"></input>
    <table border="0">
        <tr><td><label for="assignmentname">Assignment Name</label></td></tr>
        <tr><td><input type="textfield" id="assignmentname" name="assignmentname" value=""></input></td></tr>

        <tr><td><label for="assignmentquestion">Assignment Question</label></td></tr>
        <tr><td><textarea rows="4" cols="50" id="assignmentquestion" class="mceEditor" name="assignmentquestion"></textarea></td></tr>

        <tr><td><label for="assignmenttype">Assignment Type</label></td></tr>
        <tr><td>
                <select class="assignment-type" name="assignmenttype">
                    <option value="0">Check boxen</option>
                    <option value="1">Radio boxen</option>
                </select>
            </td></tr>
    </table>
    <h2>Answers</h2>
    <div id="answer-input">
        <input type="text" id="answer" value="" /><a class="add-answer" href="#">Add answer</a>
    </div>
    <table class="assignment-answers">

    </table>
    <br/>
    <input class="submit" type="submit" value="Add">
</form>
<script>
    $(document).ready(function(){
        
        
        
        $(".add-answer").click(function(){
            var answervalue = $(".assignment-answers").parent().find("#answer").val();
            if(answervalue == ""){
                alert("Fill in Answer");
            }else{
                $(".assignment-answers").append("<tr><td>\n\
                                                <a class='icon delete delete-answer left' href='#'>del</a><input class=answer-checkbox style=width:auto type=checkbox name=checkoption value="+answervalue+" />\n\
                                                <input class=answer-radio style=width:auto type=radio name=radiooption value="+answervalue+" />"+answervalue+"\n\
                                                <input class=answer-text type=hidden name=answers value="+answervalue+" />\n\
                                                </tr></td>");
                $(".assignment-answers").parent().find("#answer").val("");
                RadioCheckCheck();
            }
            return false;
        });
        $(".delete-answer").live("click",function(){
            $(this).parent().parent().remove();
            return false;
        });
        
        $(".assignment-type").change(function(){
            $(".answer-checkbox").prop("checked", false);
            $(".answer-radio").prop("checked", false);
            RadioCheckCheck();
        });
        function RadioCheckCheck(){
            if($(".assignment-type").val() == 1){
                $(".answer-checkbox").hide();
                $(".answer-radio").show();
            }else{
                $(".answer-radio").hide();
                $(".answer-checkbox").show();
            }
        }
    });
</script>
<p>
    <a class="button" href="${url}index">Back to index</a>
</p>